<template>
  <div> 
    <p>页面</p>
    <el-form :model="SongForm" :rules="rules" ref="SongForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="歌曲名字" prop="name">
          <el-input v-model="SongForm.name"></el-input>
      </el-form-item>
      
      <el-form-item label="添加歌曲" prop="url">
          <UploadMusic ref="uploadmusic" @Sendmusic="sendmusic" :fileList="fileList1"></UploadMusic>
      </el-form-item>

      <el-form-item label="专辑" prop="album">
          <el-input v-model="SongForm.album"></el-input>
      </el-form-item>
    
      <el-form-item label="创建时间" prop="createTime">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="SongForm.createTime" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="歌曲图片" prop="image">
        <UpLoadImg :action="action" :dialogImageUrl="SongForm.image" @Sendimg="sendimg" ref="uploadimg" :fileList="fileList"></UpLoadImg>
      </el-form-item>

      <el-form-item label="歌词" prop="lyric">
          <WangEditor :introduction="SongForm.lyric" @sendEditor="handlEditor" ref="wangedit"></WangEditor>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForm('SongFrom')">确定</el-button>
          <el-button @click="resetForm('SongForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UpLoadImg from '@/components/Background/UpLoadImg/uploadimg.vue'
import WangEditor from '@/components/WangEditor.vue'
import UploadMusic from '@/components/Background/UpLoadImg/uploadmusic.vue'
import { mapState} from 'vuex'
export default {
    components:{
        WangEditor,
        UpLoadImg,
        UploadMusic
    },
    data() {
      return {
        action:this.$baseUrl + '/files/SongImgUpload',
        fileList:[],
        fileList1:[],
        SongForm: {
          singerId:'',
          name: '',
          createTime:'',
          lyric: '',
          album:'',
          url:'',
          image:'',
        },
        rules: {
          name: [
            { required: true, message: '请输入歌曲名', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          createTime: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
        }
    }
},
    methods:{
        async submitForm(){
          if(this.title == "添加"){
            const res = await this.$axios.post("Song/AddSong",this.SongForm)
            console.log(res)
            if(res.code == "200"){
                this.$router.push("/song")
                this.$message.success(res.msg)
            }
            else{
              this.$message.error(res.msg)
            }
          }
           else{
            const ase = await this.$axios.put("Song/UpdateSong",this.SongForm)
            console.log("poppopoopopopo")
            console.log(this.SongForm)
            console.log(ase)
            this.$router.push("/song")
            this.$message.success(ase.msg)
          }
        },
        handlEditor(val){
        this.SongForm.lyric = val.replace(/<[^>]+>/g,"\n")
        },
        sendmusic(val){
            this.SongForm.url = val
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs.uploadimg.clear()
        this.$refs.wangedit.editor.clear()
        this.$refs.uploadmusic.clear()
      },
        sendimg(val){
        this.SongForm.image = val
        console.log(val)
        },
    },
    created(){
      this.SongForm.singerId = this.SingerId
      if(this.title == "编辑"){
        console.log(this.title)
        console.log(this.SongData)
        this.SongForm = this.SongData
        this.fileList.push({name:'',url:this.SongForm.image})
        this.$nextTick(()=>{
          this.$refs.wangedit.html=this.SongForm.lyric
        })
        this.fileList1.push({name:'',url:this.SongForm.url})
      }
    },
    computed:{
      ...mapState('song1',['SingerId']),
      ...mapState('SongDatas',['title','SongData'])
    }
}
</script>

<style scoped>

</style>